<?php
    session_start();
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="css/index.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <iframe frameborder="0" marginwidth="0" marginheight="0" width="100%" height="60px" scrolling="no" src="header.php"></iframe>
        <div class="body">
            <div id="row">
               <!-- <div class="item">
                    <img class="img" src="">
                    <div class="desc">
                        cuisine name1
                    </div>
                </div>
                <div class="item">
                    <img class="img" src="">
                    <div class="desc">
                        <a href="detail.html">cuisine name2</a>
                    </div>
                </div>
                <div class="item">
                    <img class="img" src="">
                    <div class="desc">
                        cuisine name3
                    </div>
                </div>
                <div class="item">
                    <img class="img" src="">
                    <div class="desc">
                        cuisine name4
                    </div>
                </div>-->
            </div>
        </div>
    <script src="js/jquery.js" type="application/javascript"></script>
    <script type="application/javascript">
        $(document).ready(function(){
            getAllCuisine();
        });
        function getAllCuisine() {
            $.ajax({
                url: "http://localhost:8080/cuisine/server/controller/home.php",
                type: "get",
                success(data){
                    console.log(data);
                    let html = "";
                    data = JSON.parse(data);
                    for (let i = 1; i <= data.length; i++) {
                        let item = data[i-1];
                        if (i % 4 === 1) {
                            html += "<div class=\"row\">";
                        }
                        html += "<div class=\"item\">" + "<img class=\"img\" src=\""+item.pic+"\">"
                            + "<div class=\"desc\">" + item.name + "</br>" + item.desc + " </div></div>";
                        if (i % 4 === 0) {
                            html += "</div>";
                        }
                    }
                   $("#row").html(html);
                },
                error(e) {
                    console.log(e);
                }
            })
        }
    </script>
    </body>
</html>